<template>
<view>
    <uni-card>
      <uni-row class="demo-uni-row" :width="nvueWidth">
        <uni-col :span="2">
          <view class="demo-uni-col dark">
            <image src="../../static/编组 2@2x.png" style="width: 38px;height: 38px;border-radius: 50%;margin-top:12px ;
		"></image>
          </view>
        </uni-col>
        <uni-col :span="18" offset="3">
          <view class="demo-uni-col light">
           <view class="word1" style="margin-top: 10px;margin-bottom:6px;" >预约入园时间</view>

           <view class="word1.1">2024年9月{{day}}日  {{period}}  </view>
          </view>
        </uni-col>
      </uni-row>
    </uni-card>
    <text class="title">预约信息</text>
	<uni-card style="margin-bottom: 14px;">
		<uni-forms ref="baseForm" :modelValue="group" label-position="top">
		  <uni-forms-item label="团体名称:" required>
		    <uni-easyinput v-model="group.name" placeholder="请输入团体名称" />
		  </uni-forms-item>
		  <uni-forms-item label="人员类别:" required >
		     <uni-data-select v-model="group.choice2" :localdata="choice2"></uni-data-select> 
		  </uni-forms-item>
		  <uni-forms-item label="团体人数:" required >
		     <uni-easyinput v-model="group.num" placeholder="团体所有人数(负责人、随团工作人员、游客等)" />
		  </uni-forms-item>
		</uni-forms>
	</uni-card>
	<text class="title">团体负责人1</text>
    <uni-card style="margin-bottom: 35px;">
      <uni-forms ref="baseForm" :modelValue="baseFormData" label-position="top">
        <uni-forms-item label="姓名:" required>
          <uni-easyinput v-model="baseFormData.name" placeholder="请输入预约人姓名" />
        </uni-forms-item>
        <uni-forms-item label="证件类型:" required >
          <uni-data-select v-model="value" :localdata="choice" ></uni-data-select>
        </uni-forms-item>
        <uni-forms-item label="证件号码:" required>
          <uni-easyinput v-model="baseFormData.num" placeholder="请输入证件号码" />
        </uni-forms-item>
        <uni-forms-item label="手机号码:" required>
          <uni-easyinput v-model="baseFormData.phone" placeholder="请输入手机号码" />
        </uni-forms-item>
      </uni-forms>
    </uni-card>
    <view v-for="(item,index) in arr" style="margin-top: -20px;">
      <text class="title">{{group.choice2}}{{index+1+1}}</text>
      <image class="image-delete" @click="delPeople(index)" src="../../static/delete.png"></image>
      <uni-card style="top: -20px;">
        <uni-forms ref="baseForm" :modelValue="baseFormData" label-position="top">
          <uni-forms-item label="姓名:" required>
            <uni-easyinput v-model="arr[index].name" placeholder="请输入预约人姓名" />
          </uni-forms-item>
          <uni-forms-item label="证件类型:" required >
            <uni-data-select v-model="arr[index].choice" :localdata="choice" ></uni-data-select>
          </uni-forms-item>
          <uni-forms-item label="证件号码:" required>
            <uni-easyinput v-model="arr[index].num" placeholder="请输入证件号码" />
          </uni-forms-item>
          <uni-forms-item label="手机号码:" required>
            <uni-easyinput v-model="arr[index].phone" placeholder="请输入手机号码" />
          </uni-forms-item>
        </uni-forms>
      </uni-card>
    </view>
    <button class="addpeople" @click="addPeople" style="top: -10px;" >
      <text class="addpeople-text" >+ 添加同行人 </text>
    </button>
    <view class="mes">
      <image class="image-warn" src="../../static/warn.png"></image>
      最多可预约成人4人，儿童3人
    </view>
    <button class="sumbit" @click="jump()">
      <text class="sub-text">提交预约</text></button>

  </view>
</template>

<script setup>
	import {ref} from 'vue'
	let index=ref(0);
	let choice=ref([{
	  text:"中国居民身份证",
	  value:0
	},{
	  text:"军人身份证件",
	  value:1
	},
	  {
	    text:"港澳台居民居住证",
	    value:2
	  }
	])
	let choice2 = ref([
	{
		text:"团体负责人",
		value:"团体负责人"
	},{
		text:"随团工作人员",
		value:"随团工作人员",
	},{
		text:"游客",
		value:"游客"
	}
	])
	let baseFormData= ref({
	  name: '',
	  phone:'',
	  num:'',
	  choise:[0],
	} )
	let group=ref({
	  name:'',
	  num:"",
	})
	let arr =ref([{
	  name:'',
	  choice:[0],
	  num:"",
	  phone:"",
	}])
	let addPeople=function(){
	  arr.value.push({
	    name:'',
	    choice:[0],
	    num:"",
	    phone:"",
	  })
	}
	let delPeople=function(index){
	  arr.value.splice(index,1)
	}
  function jump(){
    uni.navigateTo({
      url: '/pages/apointment/team-success'
    })
  }
  let day =sessionStorage.getItem("day")
  let period = sessionStorage.getItem("period")
</script>

<style>
	.uni-data-checklist .checklist-group .checklist-box.is--tag[data-v-2f788efd] {
	  margin-right: 10px;
	  padding: 5px 10px;
	  border: 1px #DCDFE6 solid;
	  border-radius: 20px;
	  background-color: #f5f5f5;
	}
	.form{
	  color: #05261b;
	  font-size: 15px;
	  font-face: PingFangSC;
	  font-weight: 400;
	  line-height: 0;
	  letter-spacing: 0;
	  paragraph-spacing: 0;
	  text-align: left;
	}
	.title{
	  margin: 15px;
	  font-family: PingFangSC-Medium;
	  font-weight: 500;
	  font-size: 15px;
	  color: #000000;
	  letter-spacing: 0;
	}
	.box1{
	  opacity: 0.75;
	  font-family: PingFangSC-Regular;
	  font-weight: 400;
	  font-size: 12px;
	  color: #323232;
	  letter-spacing: 0;
	}
	.numbox{
	  width: 160px;
	  margin-left: 178px;
	}
	.addpeople{
	  width: 94%;     /* 按钮的宽度，根据需要调整 */
	  text-align: center;
	  height: 60px;
	  background: #FFFFFF;
	  border: 1px solid #8DCB6D;
	  border-radius: 12px;
	  border-style: dashed;
	}
	.add{
	  width: 16px;
	  height: 16px;
	  opacity: 0;
	  background: #000000;
	}
	.addpeople-text{
	  font-family: PingFangSC-Regular;
	  font-weight: 400;
	  font-size: 15px;
	  color: #323232;
	  letter-spacing: 0;
	  text-align: center;
	  margin-top: 20px;
	  margin-bottom:10px;
	}
	.image-warn{
	  width: 12px;
	  height: 12px;
	  margin-bottom: -2px;
	}
	.image-delete{
	  width: 16px;
	  height: 16px;
	  margin-left: 360px;
	  z-index: 99;
	  top: -20px;
	}
	.mes{
	  opacity: 0.75;
	  font-family: PingFangSC-Regular;
	  font-weight: 400;
	  font-size: 12px;
	  color: #323232;
	  letter-spacing: 0;
	  margin-right: 15px;margin-left: 15px;
	  margin-top: 11px;margin-bottom: 26px;
	}
	.sumbit{
	  position:bottom;  /* 固定定位 */
	  bottom:0%;        /* 底部对齐 */
	  left: 46%;         /* 水平居中 */
	  transform: translateX(-50%);
	  width: 93%;     /* 按钮的宽度，根据需要调整 */
	  text-align: center;
	  height: 45px;
	  background: #8DCB6D;
	  border-radius: 25px;
	  marginL: 15px;
	}
	.sub-text{
	  font-family: PingFangSC-Medium;
	  font-weight: 500;
	  font-size: 17px;
	  color: #FFFFFF;
	  letter-spacing: 0;
	}
	.word1{
	  	 width: 72px;
	  	 height: 17px;
	  	 font-family: PingFangSC-Regular;
	  	 font-weight: 400;
	  	 font-size: 12px;
	  	 color: #000000;
	  	 letter-spacing: 0;
	   }
	.word1.1{
	  	width: 212px;
	  	height: 21px;
	  	font-family: PingFangSC-SNaNpxibold;
	  	font-weight: 600;
	  	font-size: 15px;
	  	color: #000000;
	  	letter-spacing: 0;
	  }
</style>
